<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Progress Bar examples - Design Samples</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">

<link rel="stylesheet" type="text/css" href="../../build/progressbar/assets/skins/sam/progressbar.css">

<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">

<!-- js -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>

<script type="text/javascript" src="../../build/progressbar/progressbar-debug.js"></script>

<style type="text/css">



.yui-skin-sam #pbr .yui-pb, 
.yui-skin-sam #pbcopper .yui-pb  {
	background-color:transparent;
	background-image:none;
	border:none;
}
.yui-skin-sam #pbr .yui-pb-bar,
.yui-skin-sam #pbcopper .yui-pb-bar {
	background-color:transparent;
	background-image:none;
}

.yui-skin-sam #pbr .yui-pb-mask, 
.yui-skin-sam #pbcopper .yui-pb-mask {
	border:none;
	margin:0;
}


.yui-skin-sam #pbcopper .yui-pb {
	background-image: url(copperbackV.gif);
}

.yui-skin-sam #pbcopper .yui-pb {
	width:25px;
	height: 200px;
}

.yui-skin-sam #pbcopper .yui-pb-mask div  {
	background-image: url(coppermaskV.gif);
}

.yui-skin-sam #pbcopper .yui-pb-bar {
	background-image: url(copperbarV.gif);
}

.yui-skin-sam #pbcopper .yui-pb-bar {
	margin: 32px 0;
}


.yui-skin-sam #pbr .yui-pb {
	width:401px;
	height: 100px;
}

.yui-skin-sam #pbr .yui-pb-mask div  {
	background-image:  url(ruler.gif);
}

.yui-skin-sam #pbr .yui-pb-bar {
	background-image: url(gradient.png);
}

.yui-skin-sam #pbr .yui-pb-caption {
	font-size: large;
	font-weight:bold;
	visibility:visible;
	vertical-align:top;
}

#pbr {
	position:relative;
}

#caption {
	position:absolute;
	width:100%;
	z-index:3;
	text-align:center;
	font-size:large;
	font-weight:bold;
}

code {
	background-color:#e0e0e0;
	border:thin solid #c0c0c0;
	white-space:pre;
	font-size:10px;
}

hr {
	margin:2em 0;
}

.dp-highlighter th, .dp-highlighter td {
	border:0;
	padding:0;
}
.dp-highlighter .line1, .dp-highlighter  .line2 {
	padding-left:10px;
	white-space:nowrap;
}

</style>
</head>
<body class="yui-skin-sam">

	<div id="doc">
		<div id="hd">
			<h1>Progress Bar examples - Design Samples</h1>
			<p>A sample of ProgressBars.</p>
		</div>
		<div id="bd">
			<table>
				<tr>
					<td rowspan="2" id="pbcopper"></td>
					<td><div id="pbr"><div id="caption">50%</div></div></td>
				</tr><tr>
					<td>
						Value:<br/>
						<input id="value" value="50" /> <button id="go">Set</button>
					</td>
				</tr>
			</table>
		</div>
		<div id="ft">
			<p>The input element lets you change the values of both bars at once. 
			None of these ProgressBars use the standard SAM skin that comes
			with the YUI library.  Since the rest of the page does use that skin, 
			the first thing is to cancel out those:</p> 
			<textarea name="code" class="CSS" cols="60" rows="1">
				.yui-skin-sam #pbr .yui-pb, 
				.yui-skin-sam #pbcopper .yui-pb  {
					background-color:transparent;
					background-image:none;
					border:none;
				}
				.yui-skin-sam #pbr .yui-pb-bar,
				.yui-skin-sam #pbcopper .yui-pb-bar {
					background-color:transparent;
					background-image:none;
				}

				.yui-skin-sam #pbr .yui-pb-mask, 
				.yui-skin-sam #pbcopper .yui-pb-mask {
					border:none;
					margin:0;
				}
			</textarea>
			<p>The containers for the two ProgressBars have ids <code>pbcopper</code> and <code>pbr</code> so we use them to 
			specifically cancel the built-in styles for them.  Of course if the page had not used the <code>yui-skin-sam</code>
			className, this would not have been needed at all, but then other YUI controls would have been deprived of their skinning. </p>
			<hr/>
			<p>The bar on the left, with a certain Victorian-era look, was created with this code:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				var pbcopper = new YAHOO.widget.ProgressBar({direction:'btt',anim:true,value:50});
				pbcopper.get('anim').duration = 3;
				pbcopper.get('anim').method = YAHOO.util.Easing.bounceBoth;
				pbcopper.render('pbcopper');
			</textarea>
			<p>It has been set to grow from bottom to top with the <code>direction</code> attribute, 
			with animation enabled and an initial value.  The parameters for the animation have been set
			in the next two lines and finally the ProgressBar was rendered into its container, <code>pbcopper</code>.</p>
			<p>The style of the bar is due to the following declarations:</p>
			<textarea name="code" class="CSS" cols="60" rows="1">
				.yui-skin-sam #pbcopper .yui-pb {
					background-image: url(copperbackV.gif);
				}

				.yui-skin-sam #pbcopper .yui-pb {
					width:25px;
					height: 200px;
				}

				.yui-skin-sam #pbcopper .yui-pb-mask div  {
					background-image: url(coppermaskV.gif);
				}

				.yui-skin-sam #pbcopper .yui-pb-bar {
					background-image: url(copperbarV.gif);
				}

				.yui-skin-sam #pbcopper .yui-pb-bar {
					margin: 32px 0;
				}
			</textarea>
			<p>We are using three images to style this ProgressBar, the image in the first declaration provides the silvery concave background 
			of the bar, the second the copper faceplate, which includes a transparent window to let the bar show through 
			and the last one, the brown bar.  The three images are here:

			<table style="text-align:center"><tr><th>copperbackV.gif</th><th>coppermaskV.gif</th><th>copperbarV.gif</th></tr>
			<tr><td><img src="copperbackV.gif" /></td><td><img src="coppermaskV.gif" /></td><td><img src="copperbarV.gif" /></td></tr></table>

			None of the images are the size of the ProgressBar as shown, the ProgressBar either crops or tiles them as needed
			to cover the given area of 200x25px.  We have to provide a margin for the bar.  The bar will be covered by the opaque
			areas of the mask, in fact, the bar stretches under the sides of the copper faceplate, which is not an issue, but we can't let it go
			behind the top and bottom of the faceplate, otherwise, the bar would not show up when it is within 16 units of the end values for the range,
			it would be running behind the faceplate.  Thus, we set <code>margin: 32px 0</code> to 
			prevent the bar to go under.</p>
			
			<hr/>
			<p>This ProgressBar at the  top uses a mask that is not symmetrical in any way.  It cannot be stretched or cropped.  
			The bar, which looks like a wedge, is actually rectangular as it always is.  
			The mask has a wedge-shaped transparent area in the bottom-right corner, with an opaque area in the top-left of the same color as the page background.
			It also has the tick marks which reach into the transparent area.
			The bar is a single image with a color gradient, the bar shows whatever needs of it.  
			Here you have them both over a golden background with blue borders around the two images,
			the wedge-shaped window can be clear seen letting the golden background show through:</p>
			<div style="background-color:gold; padding:1em;text-align:center">
				<img style="border:thin solid blue" src="ruler.gif" />
				<br/>
				<br/>
				<img  style="border:thin solid blue" src="gradient.png" />
			</div>
			<p>This images are assigned through the following CSS style declarations:</p>
			<textarea name="code" class="CSS" cols="60" rows="1">
				.yui-skin-sam #pbr .yui-pb {
					width:401px;
					height: 100px;
				}

				.yui-skin-sam #pbr .yui-pb-mask div  {
					background-image:  url(ruler.gif);
				}

				.yui-skin-sam #pbr .yui-pb-bar {
					background-image: url(gradient.png);
				}
			</textarea>
			<p>The bar itself was created with the following code:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				var pbr = new YAHOO.widget.ProgressBar({ariaTextTemplate:'{value}%',anim:true,value:50});
				pbr.get('anim').duration = 2;
				pbr.render('pbr');
			</textarea>
			<p>The ProgressBar has been assigned a template to be voiced by WAI-ARIA readers and has animation enabled.
			It has been further suplemented with the current value.  We have used 
			CSS positioning to get the caption overlaid on the area not occupied by the wedge.
			To keep it updated, we use the following code:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				pbr.on('progress',function (value) {
					YAHOO.util.Dom.get('caption').innerHTML = value + '%';
				});
			</textarea>
		</div>
	</div>
	
<script  type="text/javascript">


	YAHOO.util.Event.onDOMReady( function () {
			
		var pbcopper = new YAHOO.widget.ProgressBar({direction:'btt',anim:true,value:50});
		pbcopper.get('anim').duration = 3;
		pbcopper.get('anim').method = YAHOO.util.Easing.bounceBoth;
		pbcopper.render('pbcopper');
		
		var pbr = new YAHOO.widget.ProgressBar({ariaTextTemplate:'{value}%',anim:true,value:50});
		pbr.get('anim').duration = 2;
		pbr.render('pbr');
		
		pbr.on('progress',function (value) {
			YAHOO.util.Dom.get('caption').innerHTML = value + '%';
		});
		
		YAHOO.util.Event.on('go','click',function(ev) {
			var value = parseInt(YAHOO.util.Dom.get('value').value,10);
			pbcopper.set('value',value);
			pbr.set('value',value);
		});
			
	});
</script>
<script type="text/javascript" src="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" language="javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
</body>
</html>
	
